<template>
    <h-section collapse title="业务需求">
        <div :class="['workbench-require-card-item', 'disabled-item']" v-for="item of list" :key="item.id" style="background: #fff">
            <flexbox align="flex-start">
                <div style="flex: 1; overflow: hidden">
                    <flexbox justify="space-between">
                        <flexbox style="flex: 1; margin-left: 20px; overflow: hidden">
                            <HToolTip :title="item.requireName">
                                <span style="color: #172b4d; margin-left: 4px">{{ versionDetail.pmpProductDetailDTO.systemName }}</span>
                            </HToolTip>
                            <span class="margin-l-8 primary-color">{{ item.requestNumber }}</span>
                        </flexbox>

                        <a-tag v-if="item.repairVersion">
                            {{ item.repairVersion }}
                        </a-tag>
                    </flexbox>
                    <flexbox jusitfy="space-between" style="overflow: hidden">
                        <HToolTip :title="item.requireName">
                            <span style="color: #172b4d; margin-left: 24px">{{ item.requestName }}</span>
                        </HToolTip>
                    </flexbox>
                </div>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { HToolTip } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HToolTip
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        versionDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup() {
        const state = reactive<any>({});
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
@import '../../../LeftSide/styles/common.less';
::v-deep(.ant-badge-status-text) {
    margin-left: 0 !important;
}
</style>